@charset "utf-8";

*{
    padding: 0;
    margin: 0;
}
.head{
    position: fixed;
    top: 0;
    width: 100%;
}
.navbar-brand{
    line-height: 50px;
    padding-top: 0;
    padding-bottom: 0;
    img{
        display: inline-block;
        vertical-align: middle;
    }
}
.navbar{
    margin-bottom: 0;
    border: none;
}
.navbar-default{
    background: #222222;
}
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus{
    color: white;
    background: #080808;
}
.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus{
    color: #FFFFFF;
    background-color: transparent;
}
//内容区   
.product1{
    background-color: #8bc01f;
    .pad1{
        padding-top: 70px;
        padding-bottom: 70px;
        h4,p{
            color: white;
        }
        h4,p,.btn{
            animation: ky3 2s 0.2s;
        }
        h2{
            padding-top: 100px;
            color: white;
            animation: ky2 2s 0.5s;
        }
        h2 span{
            display: inline-block;
            width: 34px;
            height: 34px;
            background: white;
            color: #8bc01f;
            margin-right: 5px;
            text-align: center;
        }
        h4{
            padding: 10px 0;
        }
        p{
            padding-top: 10px;
        }
        button{
            color: #8bc01f;
        }
        
        .hidm{
            padding-top: 100px;
            animation: ky1 2s;
        }
        
        @keyframes ky1{
            0%{
                opacity: 0;
                transform: translateY(-50px);
            }
            100%{
                transform: translateY(0);
                opacity: 1;
                
            }
        }
        @keyframes ky2{
            0%{
                opacity: 0;
                transform: translateX(-50px);
            }
            100%{
                transform: translateX(0);
                opacity: 1;
            }
        }
        @keyframes ky3{
            0%{
                opacity: 0;
                transform: translateY(50px);
            }
            100%{
                transform: translateY(0);
                opacity: 1;
            }
        }
    }
}
.product2{
    background-color: #3393df;
    .pad2{
        padding-top: 70px;
        padding-bottom: 70px;
        h2{
            color: white;
            font-size: 48px;
        }
        h2 span{
            margin-left: 20px;
            display: inline-block;
            width: 55px;
            height: 55px;
            background: white;
            color: #3393df;
            margin-right: 5px;
            text-align: center;
        }
        p{
            color: white;
            font-size: 14px;
        }
        h3{
            color: white;
            font-size: 24px;
        }
        .tp{
            padding-top: 130px;
        }
    }
}
.product3{
    .pad3{
        padding-top: 70px;
        padding-bottom: 70px;
        h2 span{
            display: inline-block;
            width: 34px;
            height: 34px;
            background: #3393df;
            color: white;
            margin-right: 5px;
            text-align: center;
        }
        h2{
            color: #3393df;
        }
        h4{
            color: #3393df;
            padding-bottom: 10px;
            padding-top: 10px;
            
        }
        h5{
            padding-bottom: 10px;
            color: #5d5d5d;
        }
        p{
            text-indent: 10px;
        }
        .psn1{
            position: relative;
        }
        @media screen and(min-width:640px) and (max-width:767px){
            .pro-img1{
                position: absolute;
                top: 65%;
                right: 5%;
            }
        }
        .pro-img1{
            display: block;
            margin: 0 auto;
        }
        .pro-img2{
            display: block;
            margin: 0 auto;
        }
    }
}
.product4{
    background-color: #F7F7F7;
    .pad4{
        padding-top: 70px;
        padding-bottom: 70px;
        h2 span{
            display: inline-block;
            width: 34px;
            height: 34px;
            background: #3393df;
            color: white;
            margin-right: 5px;
            text-align: center;
        }
        h2{
            color: #3393df;
        }
        h4{
            color: #3393df;
            padding-bottom: 10px;
            padding-top: 10px;
            
        }
        h5{
            padding-bottom: 10px;
            color: #5d5d5d;
        }
        p{
            text-indent: 10px;
        }
        .psn2{
            position: relative;
        }
        @media screen and(min-width:640px) and (max-width:767px){
            .pro-img2{
                position: absolute;
                top: 65%;
                right: 5%;
            }
        }
        .pro-img2{
            display: block;
            margin: 0 auto;
        }
    }
}
//底部
footer{
    width: 100%;
//  height: 115px;
    background: #222222;
    .tp1 p{
        margin-top: 30px;
        display: inline-block;
        color: #8c8d94;
        a{
            color: #8c8d94;
        }
    }
    .tp2{
        margin-top: 30px;
        padding-bottom: 30px;
    }
}
